<template>
  <div>
    <base-page ref="basePage" :basepage="basePage"></base-page>
  </div>
</template>
<script>
import BasePage from "../BasePage.vue";
export default {
  name: "RouterManage",
  components: {
    "base-page": BasePage,
  },
  data() {
    return {
      basePage: {
        url: "routeOperation",
        searchConf: [
          [
            {
              title: "路径",
              type: "input",
              prop: "path",
            },
            {
              title: "名称",
              type: "input",
              prop: "name",
            },
            {
              title: "组件名",
              type: "input",
              prop: "componentName",
            },
          ],
        ],
        buttonConf: {
          insertShow: true,
          deleteShow: true,
        },
        tableColumnConf: {
          columns: [
            { prop: "name", label: "名称" },
            { prop: "path", label: "path" },
            { prop: "componentName", label: "组件名称" },
            { prop: "parentName", label: "父路由" },
            { prop: "createName", label: "创建人" },
            { prop: "createTime", label: "创建时间" },
            { prop: "available", label: "是否有效" },
          ],
          operation: {
            state: true,
            defs: [],
          },
        },
        detailConf: {
          title: "用户信息",
          data: [],
        },
        formConf: {
          formData: {
            path: "",
            name: "",
            componentName: "",
            parentId: "",
            available: "",
          },
          dialogVisible: false,
          width: "50%",
          title: "路由新增",
          data: [
            {
              title: "path",
              type: "input",
              prop: "path",
            },
            {
              title: "名称",
              type: "input",
              prop: "name",
            },
            {
              title: "组件名",
              type: "input",
              prop: "componentName",
            },
            {
              title: "父组件名",
              type: "select",
              prop: "parentId",
              data: [],
            },
            {
              title: "是否有效",
              type: "select",
              prop: "available",
              data: [
                { value: "1", label: "有效" },
                { value: "0", label: "无效" },
              ],
            },
          ],
          rules: {
            path: [
              {
                validator: (rule, value, callback) => {
                  if (value === "") {
                    callback(new Error("path不能为空"));
                  } else {
                    callback();
                  }
                },
                trigger: "blur",
              },
            ],
            name: [
              {
                validator: (rule, value, callback) => {
                  if (value === "") {
                    callback(new Error("名称不能为空"));
                  } else {
                    callback();
                  }
                },
                trigger: "blur",
              },
            ],
            componentName: [
              {
                validator: (rule, value, callback) => {
                  if (value === "") {
                    callback(new Error("组件名不能为空"));
                  } else {
                    callback();
                  }
                },
                trigger: "blur",
              },
            ],
            parentId: [
              {
                validator: (rule, value, callback) => {
                  if (value === "") {
                    callback(new Error("父组件不能为空"));
                  } else {
                    callback();
                  }
                },
                trigger: "blur",
              },
            ],
            available: [
              {
                validator: (rule, value, callback) => {
                  if (value === "") {
                    callback(new Error("不能为空"));
                  } else {
                    callback();
                  }
                },
                trigger: "blur",
              },
            ],
          },
        },
      },
    };
  },
  methods: {
    getRoutes() {
      this.COMMON.httpPost(
        this,
        "routeOperation/selectList",
        {},
        (result) => {
          if (result.result === "SUCCESS") {
            var data = new Array();
            if (result.list != undefined && result.list.length != 0) {
              result.list.forEach((element) => {
                var item = {};
                item["value"] = element.id;
                item["label"] = element.name;
                data.push(item);
              });
            }
            var item = {};
            item["value"] = null;
            item["label"] = "Home";
            data.push(item);
            this.basePage.formConf.data[3]["data"] = data;
          }
        },
        (result) => {}
      );
    },
    event(event) {
      switch (event) {
        case "insert-success": {
          this.$refs.basePage.getPage();
          this.getRoutes();
        }
      }
    },
    selectChange(pro, value) {},
    formatter(data, prop, index) {
      switch (prop) {
        case "available": {
          if (data == "1") {
            return "有效";
          } else {
            return "无效";
          }
        }
        default: {
          return data;
        }
      }
    },
  },
  created: function () {
    this.getRoutes();
  },
};
</script>
<style>
</style>